import React, { memo, useEffect } from 'react';
import { udp } from '@cscec/udp-ui';
import { MicroCmp } from './MicroCmp';

interface IIndicatorCenterProps {
  data: {
    params?: any;
    userInfo: any;
    bizCode: string;
    oType?: string;
    controlCategory: 1 | 2 | 3;
    page?: any;
  };
}

// const ACCEPT_KEY = "indicator_center_card_child";
const SEND_KEY = 'indicator_center_card';

/**
 * 指标中心qiankun方式
 *
 */
export default memo((props: IIndicatorCenterProps) => {
  const { data } = props;

  useEffect(() => {
    udp.getPageObserver().prevNotify({ data, type: SEND_KEY }, SEND_KEY);
  }, [data.params]);

  useEffect(() => {
    return () => udp.getPageObserver().clear(SEND_KEY);
  }, []);

  return (
    <div style={{ width: '100%' }}>
      <MicroCmp name="metrics" entry="/udpweb/metrics/index.html" pathname="/MetricsCards/list" />
    </div>
  );
});
